<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数</title>
</head>
<body>
  <script>
    function add(){};//声明一个命名的 普通函数

    let add = () => {};//声明一个命名的 箭头函数

    var add = (a,b=10) => {
      console.log(a+b);
    }
    add(5);//15
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数的特点1 箭头函数不能作为构造函数使用</title>
</head>
<body>
  <script>
    //定义一个构造函数
    function pople(){
      // this.n1 = name;
      // this.a1 = age;
      // this.g1 = gender;
    }
    var p = new pople();

    //箭头函数不是构造器，所以不能实例化，不能作为构造函数使用
    let show = () => {};
    let s = new show()
    
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数的特点2 箭头函数没有arguments，要使用可变参数可以使用 rest 方式</title>
</head>
<body>
  <script>
    //箭头函数中没有arguments
    let show = () => {
      console.log(arguments);//报错
    };
    show(10,'a',3.14,'abc');

    let show1 = (...args) => {
      console.log(args);
    }
    show1(10,'a',3.14,'abc');// [10, "a", 3.14, "abc"]
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数的特点3</title>
</head>
<body>
  <button id="btn">按钮</button>
  <script>
    document.getElementById('btn').onclick = function(){
      this.innerText = '点我发财便发财';
      console.log(this);//btn 按钮
    };

    document.getElementById('btn').onclick = () => {
      //箭头函数没有this对象，此处的this指的是外层对象，这里指的是window对象
      this.innerText = '点我发财';
      console.log(this);//window
    };
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数的特点4</title>
</head>
<body>
  <script>
    //正常写法
    let add = (a,b) => {
      return a + b;
    }   
    console.log(add(10,15));// 25

    //函数体只有一句并且还是返回值，则不需要{}，也不需要return
    let add1 = (a,b) => a + b;
    console.log(add1(10,15));// 25

  </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数的特点5</title>
</head>
<body>
  <script>
    //常规写法
    let add = (a) => {return a + 10};
    console.log(add(5));//15
    
    //箭头函数中，形参只有一个，则不需要小括号
    let add1 = a => a + 10;
    console.log(add1(5));//15

  </script>
</body>
</html>